<template>
  <el-dialog
      title="预设点配置"
      :visible="dialogVisible"
      width="50%"
      class="preset-bit"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :modal="false"
      @open="onOpen"
  >
    <el-row>
      <el-col :span="16">
        <el-form ref="presetForm" :inline="true" :model="form" class="demo-form-inline" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" style="width: 400px" placeholder="请输入预设点名称"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <div style="float: right" class="flex-between">
          <el-button type="primary" @click="onAdd">添加</el-button>
          <el-button type="danger">清空</el-button>
        </div>
      </el-col>
    </el-row>
    <!--    表格数据-->
    <div style="margin-top: 20px;">
      <el-table
          :data="dataSource"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            label="预置点"
            align="center"
            width="200">
        </el-table-column>
        <el-table-column
            prop="name"
            align="center"
            label="名称">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="onDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import drag from "../utils/drag";

export default {
  name: "PresetBit",
  data() {
    return {
      dialogVisible: false,//弹窗的显示与隐藏
      dataSource: [],//表格数据
      form: {//表单数据
        name: ''//名称
      },
      rules: {
        name: [{required: true, message: '请输入预设点名称', trigger: 'change'}]
      }
    }
  },
  mounted() {
    //弹窗拖拽事件
    this.dragEvent()
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    //弹窗打开时触发
    onOpen() {
      if (this.$refs.presetForm) {//如果表格已经构建, 则每次打开重置表格内容
        this.$refs.presetForm.resetFields()
      }
    },
    //新增
    onAdd() {
      this.$refs.presetForm.validate((valid) => {
        if (valid) {
          console.log('this.form', this.form)
          this.$message.success('添加成功')
          this.$refs.presetForm.resetFields()//清空数据
        } else {
          return false;
        }
      });
    },
    //编辑
    onEdit(item) {
      console.log(item)
    },
    //删除
    onDelete(item) {
      console.log(item)
    },
    //弹窗拖拽
    dragEvent() {
      //获取对话框
      const dialog = document.querySelector('.preset-bit')
      //获取对话框的头部元素
      const dialogHeader = document.querySelector('.preset-bit>.el-dialog>.el-dialog__header')
      //调用拖拽函数
      drag(dialogHeader, dialog)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preset-bit {
  position: fixed;
  width: 50%;
  top: 15vh;
  left: 50%;
  bottom: auto;
  right: auto;
  margin-left: -25%;
  overflow: auto;

  /deep/ .el-dialog {
    margin: 0 !important;
    width: 100% !important;

    .el-dialog__header {
      cursor: move;

      .el-dialog__title {
        user-select: none;
      }
    }
  }
}
</style>
